{% load static %}
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
  <title>{% block title %}Новости со всего мира{% endblock %}</title>
</head>
<body>

{% include 'inc/_nav.html' %}

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3">
{#  {% load cache %}#}
{#    {% cache 30 sidebar %}#}
{#      {% block sidebar %}SIDEBAR{% endblock %}#}
{#    {% endcache %}#}
      {% block sidebar %}SIDEBAR{% endblock %}
    </div>
    <div class="col-md-9">

       {% if messages %}
         {% for message in messages %}
           {% if message.tags == 'error' %}
             <div class="alert alert-danger" role="alert">{{ message }}</div>
           {% else %}
             <div class="alert alert-{{ message.tags }}" role="alert">{{ message }}</div>
           {% endif %}
         {%  endfor %}
       {%  endif %}

      {% block content %}CONTENT{% endblock %}

      {%  if page_obj.has_other_pages %}
        <nav aria-label="...">
          <ul class="pagination">
            {% if page_obj.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}" tabindex="-1">Previous</a>
              </li>
            {% endif %}

            {% for p  in page_obj.paginator.page_range %}
              {% if page_obj.number == p %}
                <li class="page-item active" aria-current="page">
                  <a class="page-link" href="?page={{ p }}">
                    {{ p }}
  {#                  <span class="sr-only">(current)</span>#}
                  </a>
                </li>
              {%  elif p > page_obj.number|add:-3 and p < page_obj.number|add:3 %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ p }}">{{ p }}</a>
                </li>
              {%  endif %}
            {% endfor %}

            {% if page_obj.has_next %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
              </li>
            {% endif %}
          </ul>
        </nav>
      {%  endif %}
    </div>

  </div>
</div>

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>


